import { SetStateAction, useEffect, useRef, useState } from "react";
import lessModule from "./index.module.less"
import dayjs from 'dayjs';

// 主页-头部菜单组件-日期时间组件
const HomePage_HeaderMenuComponent_DateTimeComponent: React.FC = () => {
 

    const [date, setDate] = useState<string>("")
    const [time, setTime] = useState<string>("")
    const dateTimeIntervalRef = useRef<NodeJS.Timeout | null>(null);


    const change_dateTime = () => {
        setDate(dayjs().format("YYYY/MM/DD"))
        setTime(dayjs().format("HH:mm:ss"))
    }
    const change_newDateTime = () => {
        change_dateTime()
        dateTimeIntervalRef.current = setInterval(() => {
            change_dateTime()
        }, 1000)
    }
    const clear_interval=()=>{
        dateTimeIntervalRef.current && clearInterval(dateTimeIntervalRef.current)
    }

    useEffect(() => {
        change_newDateTime()
        return () => {
            clear_interval()
        }
    }, [])
    return (
        <div className={lessModule["homePageHeaderMenuComponentDateTimeComponent"]}>
            <span className={lessModule["homePageHeaderMenuComponentDateTimeComponent-date"]}>{date}</span>
            <span className={lessModule["homePageHeaderMenuComponentDateTimeComponent-time"]}>{time}</span>
        </div>
    )
}


export default HomePage_HeaderMenuComponent_DateTimeComponent